<template>
    <dv-border-box-7 :color="['#084FA0','#06073B']" style="height: 344px;margin-bottom: 18px;">
        <div class="sale-box">
            <div class="title-box">
                <span>年度销售额统计</span>
            </div>
            <div ref="sale" style="width: 100%;height: 100%;"></div>
        </div>
     </dv-border-box-7>
</template>

<script>
import * as echarts from "echarts"
export default {
    data(){
        return {

        }
    },
    methods:{},
    mounted(){
        // 拿到原生标签元素dom
        const saleDom=this.$refs.sale
        const saleEchart=echarts.init(saleDom)
        saleEchart.on("legendselectchanged",function(e){
            console.log(e,"e");
        })
        const options={
            tooltip:{
                show:true,
                trigger:"axis",
                // alwaysShowContent:true,
                triggerOn:"mousemove",
                textStyle:{
                    color:"#fff"
                },
                backgroundColor:'rgba(6,17,71,0.8)',
                borderColor:"#0E8BFF",
                borderWidth:2,
                // formatter:"{b}销售额<br/>{a0}:{c0}<br/>{a1}:{c1}<br/>{a2}:{c2}"
                formatter:function(params){
                    console.log(params,"params")
                    if(params.length==0){return}
                    let base=params[0].name+"销售额"+"<br/>"
                    for(let i=0;i<params.length;i++){
                        base=base+`<span style="display: inline-block;padding: 5px 5px 5px 0px;"><i style="display: inline-block;width: 10px;height: 10px;background:${params[i].color};border-radius: 50%;"></i>
                            </span>`+params[i].seriesName+": "+params[i].value+"<br/>"
                    }
                    return base                
                }

            },
            legend:{
                type:"plain",
                show:true,
                top:"7%",
                right:"2%",
                icon:"rect",
                itemWidth:15,
                itemHeight:15,
                align:"left",
                itemGap:10,
                textStyle:{
                    fontSize:"15px",
                },

                data:[
                    {
                        name:"2021",
                        textStyle:{
                            color:"#4FA6F7",
                        }
                    },
                    {
                        name:"2022",
                        textStyle:{
                            color:"#4FA6F7"
                        }
                    },
                    {
                        name:"2023",
                        textStyle:{
                            color:"#4FA6F7"
                        }
                    },
                ]
            },
            grid:{
                show:false,
                top:"25%",
                left:"5%",
                right:"5%",
                bottom:"8%",
                containLabel:true
            },
            xAxis:{
                type:"category",
                show:true,
                position:"bottom",
                inverse:false,
                axisLine:{
                    show:true,
                    lineStyle:{
                        color:"#0d2766"
                    }
                },
                axisTick:{
                    show:false
                },
                axisLabel:{
                    show:true,
                    color:"#4FA6F7"
                },
                splitLine:{
                    show:false
                },
                data:[
                    {
                        value:"一月"
                    },
                    {
                        value:"二月"
                    },
                    {
                        value:"三月"
                    },
                    {
                        value:"四月"
                    },
                    {
                        value:"五月"
                    },
                    {
                        value:"六月"
                    },
                    {
                        value:"七月"
                    },
                    {
                        value:"八月"
                    },
                    {
                        value:"九月"
                    },
                    {
                        value:"十月"
                    },
                    {
                        value:"十一月"
                    },
                    {
                        value:"十二月"
                    },
                ]
            },
            yAxis:{
                type:"value",
                // min:function(){
                //     return 0
                // },
                // max:function(val){
                //     return val.max
                // },
                name:"元",
                nameLocation:"end",
                nameTextStyle:{
                    fontSize:"14px",
                    color:"#4FA6F7",
                    align:"right",
                },
                nameGap:18,
                show:true,
                position:"left",
                inverse:false,
                axisLine:{
                    show:true,
                    lineStyle:{
                        color:"#0d2766"
                    }
                },
                axisTick:{
                    show:false
                },
                axisLabel:{
                    show:true,
                    color:"#4FA6F7"
                },
                splitLine:{
                    show:false
                }

            },
            series:[
                {
                    type:"line",
                    name:"2021",
                    symbol:"circle",
                    symbolSize:8,
                    label:{
                        show:false,
                        color:"#fff"
                    },
                    endLabel:{//最后端点的文字
                        show:false
                    },
                    itemStyle:{
                        color:"#E4C431"
                    },
                    lineStyle:{},
                    data:[
                        {
                            name:"一月",
                            value:83254
                        },
                        {
                            name:"二月",
                            value:105458

                        },
                        {
                            name:"三月",
                            value:114567

                        },
                        {
                            name:"四月",
                            value:135478

                        },
                        {
                            name:"五月",
                            value:157894

                        },
                        {
                            name:"六月",
                            value:183547

                        },
                        {
                            name:"七月",
                            value:214578

                        },
                        {
                            name:"八月",
                            value:221547

                        },
                        {
                            name:"九月",
                            value:195478

                        },
                        {
                            name:"十月",
                            value:185478

                        },
                        {
                            name:"十一月",
                            value:234567

                        },
                        {
                            name:"十二月",
                            value:276578

                        },
                    ],
             
                },
                {
                    type:"line",
                    name:"2022",
                    symbol:"circle",
                    symbolSize:8,
                    label:{
                        show:false,
                        color:"#fff"
                    },
                    endLabel:{//最后端点的文字
                        show:false
                    },
                    itemStyle:{
                        color:"#0DDE9C"
                    },
                    lineStyle:{},
                    data:[
                        {
                            name:"一月",
                            value:123543

                        },
                        {
                            name:"二月",
                            value:134567

                        },
                        {
                            name:"三月",
                            value:175845

                        },
                        {
                            name:"四月",
                            value:195473

                        },
                        {
                            name:"五月",
                            value:214578

                        },
                        {
                            name:"六月",
                            value:235874

                        },
                        {
                            name:"七月",
                            value:305489

                        },
                        {
                            name:"八月",
                            value:321547

                        },
                        {
                            name:"九月",
                            value:284578

                        },
                        {
                            name:"十月",
                            value:264578

                        },
                        {
                            name:"十一月",
                            value:285478

                        },
                        {
                            name:"十二月",
                            value:335478

                        },
                    ]
                },
                {
                    type:"line",
                    name:"2023",
                    symbol:"circle",
                    symbolSize:8,
                    label:{
                        show:false,
                        color:"#fff"
                    },
                    endLabel:{//最后端点的文字
                        show:false
                    },
                    itemStyle:{
                        color:"#00A3F8"
                    },
                    lineStyle:{},
                    data:[
                        {
                            name:"一月",
                            value:152545

                        },
                        {
                            name:"二月",
                            value:187584

                        },
                        {
                            name:"三月",
                            value:223658

                        },
                        {
                            name:"四月",
                            value:257264

                        },
                        {
                            name:"五月",
                            value:315246

                        },
                        {
                            name:"六月",
                            value:365645

                        },
                        {
                            name:"七月",
                            value:436548

                        },
                        {
                            name:"八月",
                            value:402547

                        },
                        {
                            name:"九月",
                            value:201544

                        },
                        // {
                        //     name:"十月",
                        //     value:150
                        // },
                        // {
                        //     name:"十一月",
                        //     value:60
                        // },
                        // {
                        //     name:"十二月",
                        //     value:50
                        // },
                    ]
                },

            ]
        }
        saleEchart.setOption(options)
        

    }
}

</script>

<style lang="scss" scoped>


.dv-border-box-7{
    border-radius: 3px;
}

:deep(.dv-border-svg-container) {
  display: none;
}

.sale-box{
    position: relative;
    box-sizing: border-box;
    height: 100%;
    // background-color: pink;
}

.title-box span{
    color: #1CDBFE;
    font-size: 22px;
    font-family: Source Han Sans CN;
    letter-spacing:1px;
    font-weight: 300;
    position: absolute;
    top: 20px;
    left: 44px;
    &::before{
        position: absolute;
        content: "";
        width: 13px;
        height: 27px;
        border-radius: 6px;
        background-color:#1CDBFE;
        left: -24px;
        top: -3px;
    }
}

</style>